// 详情页面容器
.detail-container {
  width: 100%;
  min-height: 100vh;
  background: #F2F2F6;
  overflow-x: hidden;
  box-sizing: border-box;
}

// 顶部导航区域
.detail-header {
  width: 750px;
  background: #3F99F9;
  border-radius: 0px 0px 0px 0px;
  position: relative;
  margin: 0 auto;
}

// 顶部导航
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 40px 20px 20px;
  background: transparent;
  position: relative;

  .back-icon {
    width: 60px;
    height: 60px;
    font-size: 60px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 324px;
    height: 54px;
    font-family: 'Source Han Sans CN', 'Source Han Sans CN';
    font-weight: 500;
    font-size: 32px;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 渐变背景区域
.gradient-section {
  width: 100%;
  height: 255px;
  background: linear-gradient(191deg, #E0EFFE 0%, #FFFFFF 100%);
  position: relative;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
}

// 文本容器
.text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 57px;

  div {
    font-family: 'Source Han Sans CN', 'Source Han Sans CN';
    font-weight: 400;
    font-size: 24px;
    color: #333333;
    line-height: 36px;
    margin-bottom: 9px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .header-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 32px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .company—title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .company-handle {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #FF9200;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding-top: 9px;

    // 根据审批状态设置颜色
    &.status-pending {
      color: #FF9200; // 0是等待审批
    }

    &.status-completed {
      color: #00B042; // 1是审批完成
    }

    &.status-revoked {
      color: #666666; // -1是已撤销
    }

    &.status-rejected {
      color: #FF1919; // 2是已拒绝
    }

    // 默认颜色（等待审批）
    color: #FF9200;
  }
}

// 图标容器
.icon-container {
  position: relative;
  margin-left: auto;
}

// 主图标
.main-icon {
  position: relative;
  display: inline-block;
  padding-top: 35px;

  .icon-img {
    width: 145px;
    height: 156px;
    object-fit: contain;
  }
}

// 状态徽章
.status-badge {
  position: absolute;
  top: 97px;
  left: 30px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);

  .status-img {
    width: 125px;
    height: 125px;
    object-fit: contain;
  }
}

// 详情内容
.detail-content {
  margin-top: 22px;
  position: relative;
  z-index: 1;
}

// 信息区域通用样式
.info-section,
.detail-section,
.approval-section {
  background: #FFFFFF;
  padding: 30px 0px 50px 0px;
  margin-bottom: 22px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05);

  .section-title {
    font-family: 'Source Han Sans CN';
    font-weight: 600;
    font-size: 32px;
    color: #333;
    margin-bottom: 22px;
    // padding-bottom: 20px;
    padding-left: 30px // border-bottom: 1px solid #F0F0F0;
  }

  .detail-title-expense {
    // margin-top: 42px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 23px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px 10px 10px 10px;
    padding: 8px 0px 8px 17px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

// 包提报金额区域
.total-amount-section {
  background: #FFFFFF;
  padding: 40px;
  margin-bottom: 22px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05);
  text-align: center;

  .total-label {
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    font-size: 24px;
    color: #666;
    margin-bottom: 20px;
  }

  .total-value {
    font-family: 'Source Han Sans CN';
    font-weight: bold;
    font-size: 48px;
    color: #FF6B35;
    margin-bottom: 15px;
  }

  .total-note {
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    font-size: 24px;
    color: #999;
  }
}

.da-amount-style {
  margin-left: 20px;
  margin-right: 20px;
  border-top: 1px #E5E5E5 solid;

  .all-amount {
    padding-left: 30px;
    padding-top: 51px;
    padding-bottom: 34px;

    .all-aomunt-title {
      padding-right: 20px;

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #999999;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .all-amount-style {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 30px;
      color: #FF5219;
      text-align: left;
      font-style: normal;
      text-transform: none;

    }
  }

  .amount-bottom-style {
    padding-left: 114px;
    // padding-right: 20px;
    padding-bottom: 48px;

    .amount-bottom-title {
      padding-right: 20px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #999999;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .amount-bottom-content {

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #999999;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}

// 信息列表
.info-list,
.detail-list {

  .info-item,
  .detail-item {
    // display: flex;
    // justify-content: space-between;
    // align-items: flex-start;
    // padding: 20px 0;
    // border-bottom: 1px solid #F8F8F8;
    padding-left: 30px;

    &:last-child {
      border-bottom: none;
    }

    .info-label,
    .detail-label {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-bottom: 10px;
    }

    .info-value,
    .detail-value {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 30px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-bottom: 21px;
    }

    .department-style {
      padding-bottom: 13px !important;
    }
  }

  .amount-style {
    // width: 710px;
    // height: 140px;
    background: #E0EFFE;
    border-radius: 10px 10px 10px 10px;
    margin-left: 20px !important;
    margin-right: 20px;
    // padding: 23px 42px 16px 30px;
    padding-left: 23px;
    padding-right: 42px;
    display: flex;
    justify-content: space-between;

    .info-label {
      padding-top: 25px;

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-bottom: 6px;
    }

    .info-value {
      padding-bottom: 18px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 40px;
      color: #FF5219;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .amount-img {
      width: 94px;
      height: 101px;
      padding-top: 21px;

      img {
        width: 100%;
        height: 100%;

      }
    }
  }
}

.detail-expense {
  padding-bottom: 0 !important;

  .detail-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 26px !important;
    color: #666666 !important;
    text-align: left !important;
    font-style: normal !important;
    text-transform: none !important;
  }

  .detail-value {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 32px !important;
    color: #333333 !important;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

// 审批流程
.approval-list {
  padding-left: 30px;
  padding-right: 24px;

  .approval-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    position: relative;
    border-bottom: 1px solid #F8F8F8;

    &:last-child {
      border-bottom: none;

      .step-line {
        display: none; // 最后一个步骤不显示连接线
      }
    }

    // 连接线 - 从当前头像连接到下一个头像
    .step-line {
      position: absolute;
      left: 35px;
      top: 100px; // 从头像中心开始
      width: 2px;
      // height: calc(100% - 10px); // 连接到下一个头像中心
      height: 50px;
      background: #E5E5E5;
      z-index: 1;
    }

    // 左侧：头像和信息
    .step-left {
      display: flex;
      align-items: center;
      flex: 1;

      .step-avatar {
        position: relative;
        width: 68px;
        height: 68px;
        border-radius: 5px 5px 5px 5px;
        margin-bottom: 4px;
        margin-top: -12px;

        .avatar-img {
          width: 70px;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px 5px 5px 5px;
        }

        .step-status {
          position: absolute;
          bottom: -2px;
          right: -2px;
          width: 24px;
          height: 24px;
          background: #FFFFFF;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        }
      }

      .step-info {
        flex: 1;
        margin-left: 30px;

        .step-title {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 26px;
          color: #666666;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .step-user {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 26px;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    // 右侧：时间
    .step-right {
      flex-shrink: 0;
      text-align: right;

      .step-time {
        font-family: 'Source Han Sans CN';
        font-weight: 400;
        font-size: 24px;
        color: #999;
        line-height: 1.2;
      }
    }

    // 状态样式
    &.completed {
      .step-avatar .avatar-img {
        border-color: #4CAF50;
      }
    }

    &.current {
      .step-avatar .avatar-img {
        border-color: #FF9200;
      }

      .step-title {
        color: #FF9200;
      }
    }
  }
}

// 底部操作按钮
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  padding: 20px 30px 40px;
  display: flex;
  gap: 20px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .action-btn {
    flex: 1;
    height: 64px; // 统一按钮高度
    border-radius: 8px; // 相应调整圆角
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    font-size: 28px; // 统一按钮文字大小
    // border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; // 缩小图标与文字间距
    padding: 0 20px; // 缩小文字左右内边距

    .btn-icon {
      font-size: 18px; // 图标相应缩小
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    // 撤销按钮
    &.revoke-btn {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px; // 统一按钮文字大小
      color: #333333;
      text-align: center;
      font-style: normal;
      text-transform: none;

      .btn-icon {
        color: #333333;
      }

      &:not(:disabled):active {
        // background: #E5E5E5;
      }
    }

    // 拒绝按钮
    &.reject-btn {

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 26px; // 统一按钮文字大小
      color: #333333;
      text-align: center;
      font-style: normal;
      text-transform: none;

      .btn-icon {
        // color: #FFFFFF;
      }

      &:not(:disabled):active {
        // background: #E63946;
      }
    }

    // 同意按钮
    &.approve-btn {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px; // 统一按钮文字大小
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
      text-transform: none;
      background-color: #2D67B0;
      border: none !important;

      .btn-icon {
        // color: #FFFFFF;
      }

      &:not(:disabled):active {
        // background: #45A049;
      }
    }
  }
}

// 为底部按钮预留空间
.detail-content {
  padding-bottom: 180px;
}

:deep(.van-dialog) {
  .dialog-content {
    .dialog-text {
      font-size: 28px;
      margin: 20px auto;
    }

    .van-field .van-field__control {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #999999;
    }
  }
}